<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天天生鲜-首页</title>
<!--添加自适应说明  width=device-width:设备宽度   initial-scale=1原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<!--如果用户使用的IE浏览版本低于IE9,那么加载下面的JS文件-->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="short icon" href="images/copylogo.png">
<!-- 根据显示设备的分辨率来选择不同的样式表 -->
<!-- 当显示设备的分辨率大于或等于800时，才引入这个样式表  header.css -->
<link media="only screen and (min-width: 800px)" href="css/index.css" rel="stylesheet" type="text/css" />
<link media="only screen and (max-width: 800px)" href="css/v_index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/reset.css">
<link media="only screen and (min-width: 800px)" rel="stylesheet" href="css/foot.css" type="text/css">
<link media="only screen and (max-width: 800px)" rel="stylesheet" href="css/v_foot.css" type="text/css">
</head>

<body>
<div id="app">
	<!-- 头部  -->
	<div class="header_con">
    	<div class="header">
    		<div class="welcome fl">欢迎来到天天生鲜</div>
    		<div class="fr">
                <div class="login_btn fl">
                	欢迎：<b>源辰</b><span> |
                </div>
                <div class="login_btn fl">
                	<a href="login.html">登录</a><span> | </span><a href="register.html">注册</a>
                </div>
            	 <div class="user_link fl">
                    <span> | </span>
                    <a href="user.html">用户中心</a>
                    <span> | </span>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                    <span> | </span>
                    <a href="front/order.html" target="_blank">我的订单</a>
           		 </div> 
             </div>  
    	</div>
    </div>
    
     <!-- 搜素框 -->
     <div class="search_bar clearfix">
 		<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
 		<div class="search_con fl">
        	<form>
                <input type="text" class="input_text fl" name="key_words" placeholder="搜索商品"/>
                <input type="submit" class="input_btn fr"  value="搜索"/>
            </form>
        </div>
 		<div class="guest_cart fr">
        	<a href="front/cart.html" class="cart_name fl" target="_blank">我的购物车</a>
            <div class="goods_count fl" id="show_count">5</div>
        </div>
     </div>

    <!-- 商品分类 -->
    <div class="navbar_con">
    	<div class="navbar">
    		<h1 class="fl">全商品分类</h1>
    		<ul class="navlist fl">
    			<li><a href="">首页</a></li>
                <li class="interval">|</li>
                <li><a href="">手机生鲜</a></li>
                <li class="interval">|</li>
                <li><a href="">抽奖</a></li>
    		</ul>
    	</div>
    </div>
    
    <!-- 导航栏 -->
    <div class="center_con clearfix">
        <div class="subnav fl">
            <ul>
                <li><a href="#model01" class="fruit">新鲜水果</a></li>
                <li><a href="#model02" class="seafood">海鲜水产</a></li>
                <li><a href="#model03" class="meet">猪牛羊肉</a></li>
                <li><a href="#model04" class="egg">禽类蛋品</a></li>
                <li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
                <li><a href="#model06" class="ice">速冻食品</a></li>
            </ul>
        </div>
        <div class="slide fl">
            <ul class="slide_pics">
                <li><a href="" class=""><img src="images/slide.jpg" alt="幻灯片"></a></li>
                <li><a href="" class=""><img src="images/slide02.jpg" alt="幻灯片"></a></li>
                <li><a href="" class=""><img src="images/slide03.jpg" alt="幻灯片"></a></li>
                <li><a href="" class=""><img src="images/slide04.jpg" alt="幻灯片"></a></li>
            </ul>
            <div class="prev"></div>
            <div class="next"></div>
            <ul class="points"></ul>
        </div>
        <div class="adv fl">
            <a href=""><img src="images/adv01.jpg" alt="清凉一夏"></a>
            <a href=""><img src="images/adv02.jpg" alt="盛夏尝鲜"></a>
        </div>
    </div>
    
    <!-- 商品展示 -->
    <div class="list_model" v-for="type in types">
    	<div class="list_title clearfix">
        	<h3 class="fl" id="model01">{{type.tname}}</h3>
        	<div class="subtitle fl">
            	<span>|</span>
            	<a v-for="item in products"  v-if="item.tno == type.tno" :href="'details.html?' + item.pno +'&' + type.tname" target="_blank">{{item.pname}}</a>
            </div>
            <a :href="'goods.html?' + type.tno + '&' +type.tname" class="goods_more fr" id="fruit_more fr" target="_blank">查看更多</a>
        </div>
    
    	<div class="goods_con clearfix">
        	<div class="goods_banner fl"><img :src="'../'+ type.pic"></div>
        	<ul class="goods_list fl">
            	<li v-for="item in products" v-if="item.tno == type.tno">
                	<h4><a :href="'details.html?' +item.pno +'&' + type.tname" target="_blank" >{{item.pname}}</a></h4>
                   <a target="_blank" :href="'details.html?' +item.pno +'&' + type.tname">
                   <img :src="'../' + item.pic"></a>
                	<div class="prize">&yen; 30.00</div>
                </li>
        	</ul>
       </div>
    </div>
</div>	

<div class="bottom_nav">
	<a href="javascript:void(0)"><span></span>首页</a>
	<a href="javascript:void(0)"><span></span>分类</a>
    <a href="javascript:void(0)"><span></span>发现</a>
    <a href="javascript:void(0)"><span></span>购物车</a>
    <a href="javascript:void(0)"><span></span>我的</a>
</div>

<!-- 版权所有 -->
<div class="footer">
	<div class="foot_link">
    	<a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
	<p>CopyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</div>
    
<!--  注意引入顺序 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/slide.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
let app = new Vue({
	el:"#app",
	data:{
		types:[],
		products:[]
	},
	mounted:function(){
		console.log("product/findIndex");
		axios.get("product/findIndex").then(rt =>{
			if(rt.data.code == 200){
				this.types = rt.data.types;
				this.products = rt.data.products;
				console.log(this.products);
			}
		})
	}
})
</script>
</body>
</html>
